<div ms-controller="courseDetail" id="courseDetail">

    <ol class="breadcrumb">
        <li><a href="#!/course/list/">课件列表</a></li>
        <li class="active" ms-if="mode==MODE.add">新建课件</li>
        <li class="active" ms-if="mode==MODE.edit">编辑课件</li>
    </ol>

    <div class="body clearfix">

        <h1 ms-if="mode==MODE.add">新建课件</h1>
        <h1 ms-if="mode==MODE.edit">编辑课件</h1>

        <hr class="col-xs-12">

        <div class="col-xs-12">
            <h4 class="col-xs-12">题目
                <span>(必填)</span></h4>
            <div class="col-xs-12">
                <label>
                    <input type="text" class="form-control" placeholder="请输入标题" ms-duplex-string="title">
                </label>
            </div>
        </div>

        <div class="col-xs-12">
            <h4 class="col-xs-12">标签</h4>
            <div class="col-xs-12">
                <label>
                    <input type="text" class="form-control" placeholder="请输入标签" ms-duplex-string="tags">
                </label>
                <span class="desc">
                    格式 : First#Second#Third
                </span>
            </div>
        </div>

        <div class="col-xs-12">
            <h4 class="col-xs-12">班级
                <span>(必填)</span></h4>
            <div class="col-xs-12">
                <div ms-repeat="classSelectList" class="col-xs-2">
                    <label class="checkbox">
                        <input type="checkbox" data-toggle="checkbox" ms-attr-value="el"
                               ms-duplex-string="classSelected">{{el}}
                    </label>
                </div>
            </div>
        </div>

        <hr class="col-xs-12">

        <div class="col-xs-12">
            <h4 class="col-xs-12">文章<span>(选填)</span></h4>
            <div class="col-xs-12">
                <textarea class="form-control col-xs-12" placeholder="请输入内容" ms-duplex-string="article"></textarea>
            </div>
        </div>

        <hr class="col-xs-12">

        <div class="col-xs-12">
            <h4 class="col-xs-12">添加图片
                <span>(选填)</span>
            </h4>

            <div class="col-xs-12">
                <div>
                    <table class="table table-striped">
                        <tbody>
                        <tr ms-repeat="imgList">
                            <td class="col-xs-3 text-center">
                                <img ms-attr-src="{{el.url}}">
                            </td>
                            <td class="col-xs-3">
                                {{el.title}}
                            </td>
                            <td class="col-xs-1">
                                {{formatSize(el.size)}}
                            </td>
                            <td class="col-xs-2">
                                {{el.upload?'上传完成':'等待上传'}}
                            </td>
                            <td class="col-xs-3" ms-if="img.isUploading==true&&el.upload==false">
                                <div class="progress">
                                    <div class="bar" ms-css-width="{{el.percent + '%'}}"></div>
                                </div>
                            </td>
                            <td class="col-xs-3" ms-if="img.isUploading==false">
                                <button class="btn btn-danger"
                                        ms-click="remove($event,$index,UPLOAD.img)">
                                    <i class="glyphicon glyphicon-trash"></i>
                                    <span>删除</span>
                                </button>
                                <button class="btn btn-default"
                                        ms-if="$index!=0"
                                        ms-click="move($event,$index,UPLOAD.img,'up')">
                                    <i class="glyphicon glyphicon-arrow-up"></i>
                                </button>
                                <button class="btn btn-default"
                                        ms-if="$index<imgList.length-1"
                                        ms-click="move($event,$index,UPLOAD.img,'down')">
                                    <i class="glyphicon glyphicon-arrow-down"></i>
                                </button>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <div>
                    <button class="btn btn-default" ms-click="select($event,UPLOAD.img)">
                        <i class="glyphicon glyphicon-plus"></i>
                        <span>添加图片</span>
                    </button>
                    <button class="btn btn-primary" ms-click="start($event,UPLOAD.img)"
                            ms-attr-disabled="!img.avaliable">
                        <i class="glyphicon glyphicon-upload"></i>
                        <span>开始上传</span>
                    </button>
                </div>
                <!--<br>-->

            </div>
        </div>

        <hr class="col-xs-12">

        <div class="col-xs-12">
            <h4 class="col-xs-12">添加附件
                <span>(选填)</span>
            </h4>

            <div class="col-xs-12">

                <div>
                    <table class="table table-striped">
                        <tbody>
                        <tr ms-repeat="attachmentList">
                            <td class="col-xs-3">
                                {{el.title}}
                            </td>
                            <td class="col-xs-3">
                                <i class="glyphicon glyphicon-edit" ms-click="editAttachmentName($event,$index)"></i>
                                {{el.rename}}
                            </td>
                            <td class="col-xs-3">
                                {{formatSize(el.size)}}
                            </td>
                            <td class="col-xs-3" ms-if="attachment.isUploading==true&&el.upload==false">
                                <div class="progress">
                                    <div class="bar" ms-css-width="{{el.percent + '%'}}"></div>
                                </div>
                            </td>
                            <td class="col-xs-3" ms-if="attachment.isUploading==false">
                                <button class="btn btn-danger"
                                        ms-click="remove($event,$index,UPLOAD.attachment)">
                                    <i class="glyphicon glyphicon-trash"></i>
                                    <span>删除</span>
                                </button>
                                <button class="btn btn-default"
                                        ms-if="$index!=0"
                                        ms-click="move($event,$index,UPLOAD.attachment,'up')">
                                    <i class="glyphicon glyphicon-arrow-up"></i>
                                </button>
                                <button class="btn btn-default"
                                        ms-if="$index<attachmentList.length-1"
                                        ms-click="move($event,$index,UPLOAD.attachment,'down')">
                                    <i class="glyphicon glyphicon-arrow-down"></i>
                                </button>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <div>
                    <button class="btn btn-default" ms-click="select($event,UPLOAD.attachment)">
                        <i class="glyphicon glyphicon-plus"></i>
                        <span>添加附件</span>
                    </button>
                    <button class="btn btn-primary"
                            ms-attr-disabled="!attachment.avaliable"
                            ms-click="start($event,UPLOAD.attachment)">
                        <i class="glyphicon glyphicon-upload"></i>
                        <span>开始上传</span>
                    </button>
                </div>
            </div>
        </div>
        <hr class="col-xs-12">
        <div class="col-xs-12">
            <button class="btn btn-success" ms-click="submit" style="width: 150px">
                <i class="glyphicon glyphicon-ok"></i>
                <span>完成</span>
            </button>
        </div>


    </div>

    <style>

        input[type=text] {
            width: 300px;
        }

        textarea {
            resize: none;
            overflow: hidden;
        }

        span.desc {
            color: #b9c8d8;
            font-size: 14px;
        }

        .table {
            font-size: 14px;
        }

        h4 > span {
            font-size: 0.6em;
        }

        tr img {
            max-width: 100%;
            max-height: 100px;
        }

        button.btn {
            font-size: 12px;
        }

        tr button {
            opacity: 0;
            transition: all 0.3s linear !important;
        }

        tr:hover button {
            opacity: 1;
        }
    </style>


</div>